<template>
  <div class="viewStyle">
    <div class="footer">
      <ElButton style="margin-right: 5px" @click="resetForm()">取消</ElButton>
      <!-- <ElButton type="primary" @click="submitForm(ruleFormRef)">
        确定
      </ElButton> -->
    </div>
    <ElScrollbar style="height: calc(60vh - 63px)">
      <section style="min-width: 250px; margin: 10px">
        <div class="flex-row-center justify-between" v-for="(item, index) in wayList" :key="index"
          :class="{ 'border-active': isSelected(item) }" @click="addClick(item)">
          <!-- , 'disable': isDis(item)  -->
          <div style="display: flex; align-items: center">
            <img :src="item.url" />
            <span>{{ item.name }}</span>
          </div>
          <Plus :size="16" class="fw-bold" />
        </div>
      </section>
    </ElScrollbar>
  </div>
</template>
<script lang="ts" setup>
import {
  ElButton,
  ElScrollbar,
  ElMessage,
  ElSlider,
  ElInput,
  ElDivider,
  ElIcon,
} from "element-plus";
import { Plus } from "@vben/icons";
import { reactive, ref, onMounted, watch } from "vue";
import { router } from "#/router";
const emit = defineEmits(["close", "wayView"]);
const props = defineProps({
  airlineList: {
    type: Array,
    default: () => [],
  },
  formPoint: {
    type: Object,
    default: () => { actions: [] },
  },
  action: {
    type: Array,
    default: () => [],
  },
});
// const isDis = ref(true);
const dialogVisible = ref(false);
// 动作类型(1悬停,2无人机偏航角,3云台俯仰角,拍照,5全景拍照,6开始录像,7相机变焦,8停止录像,9开始等距间隔拍照,10开始等时间隔拍照，11结束间隔拍照)
const wayList = [
  {
    actionType: 1,
    name: "悬停",
    url: new URL(`/static/action1.png`, import.meta.url).href,
    // '../../../../assets/action1.png',
    actionValue: 10,
    actionMin: 1,
    actionMax: 900,
  },
  {
    actionType: 2,
    name: "无人机偏航角",
    url: new URL(`/static/action2.png`, import.meta.url).href,
    actionValue: 0,
    actionMin: -180,
    actionMax: 180,
  },
  {
    actionType: 3,
    name: "云台俯仰角",
    url: new URL(`/static/action3.png`, import.meta.url).href,
    actionValue: 0,
    actionMin: -120,
    actionMax: 45,
  },
  {
    actionType: 4,
    name: "拍照",
    url: new URL(`/static/action4.png`, import.meta.url).href,
  },
  {
    actionType: 5,
    name: "全景拍照",
    url: new URL(`/static/action5.png`, import.meta.url).href,
  },
  {
    actionType: 6,
    name: "开始录像",
    url: new URL(`/static/action6.png`, import.meta.url).href,
  },
  {
    actionType: 7,
    name: "相机变焦",
    url: new URL(`/static/action13.png`, import.meta.url).href,
    actionValue: 1,
    actionMin: 1,
    actionMax: 200,
  },
  {
    actionType: 8,
    name: "停止录像",
    url: new URL(`/static/action7.png`, import.meta.url).href,
  },
  {
    actionType: 9,
    name: "开始等距间隔拍照",
    url: new URL(`/static/action11.png`, import.meta.url).href,
    actionValue: 10,
    actionMin: 1,
    actionMax: 100,
  },
  {
    actionType: 10,
    name: "开始等时间隔拍照",
    url: new URL(`/static/action9.png`, import.meta.url).href,
    actionValue: 15,
    actionMin: 1,
    actionMax: 30,
  },
  {
    actionType: 11,
    name: "结束间隔拍照",
    url: new URL(`/static/action10.png`, import.meta.url).href,
  },
];
const selectList = ref([]);
const submitForm = () => {
  // 添加成功
  ElMessage({
    plain: true,
    message: "添加成功",
    type: "success",
  });
  emit("wayView", selectList.value);
  emit("close");
};
const resetForm = () => {
  emit("close");
  dialogVisible.value = false;
};
const isSelected = (item) => {
  // return selectList.value.some(
  //   (selected) => selected.actionType === item.actionType
  // );
  return false
};
// 判断是否能选择所选的动作,并输出警告
const isDis = (item) => {
  let isVideoRecording = '';
  let isPicture = '';
  let index = props.formPoint.wayPointName;//当前航点索引
  for (let i in props.airlineList) {
    for (let ii in props.airlineList[i].actions) {
      // 录像检测
      if (props.airlineList[i].actions[ii].actionType == 6) {
        isVideoRecording = props.airlineList[i].actions[ii].id;
      }
      if (props.airlineList[i].actions[ii].actionType == 8) {
        isVideoRecording = '';
      }
      // 拍照检测
      if (props.airlineList[i].actions[ii].actionType == 9 || props.airlineList[i].actions[ii].actionType == 10) {
        isPicture = props.airlineList[i].actions[ii].id;
      }
      if (props.airlineList[i].actions[ii].actionType == 11) {
        isPicture = '';
      }
    }
  }
  if (isVideoRecording && item.actionType == 6) {
    return '航点的"开始录像"航点动作间缺少"停止录像"动作';
  }
  if (isPicture && (item.actionType == 4 || item.actionType == 5 || item.actionType == 9 || item.actionType == 10)) {
    return '航点的"开始等时间隔拍照"/"开始等距间隔拍照"/"拍照"航点动作间缺少"结束间隔拍照"动作';
  }
  return false;
};
// 录像功能冲突
const isVideo = ref(true);
const isPicture = ref(true);

const addClick = (item) => {
  // 检查录像动作冲突：当已有"开始录像"动作，再次添加"开始录像"动作时
  // const hasStartVideo = selectList.value.some(action => action.actionType === 6);
  // if (hasStartVideo && item.actionType === 6) {
  //   ElMessage({
  //     plain: true,
  //     message: '航点的"开始录像"航点动作间缺少"停止录像"动作',
  //     type: "warning",
  //   });
  //   return;
  // }

  // 检查拍照动作冲突：当有"开始等时间隔拍照"或"开始等距间隔拍照"动作的前提下，
  // 再次添加"开始等时间隔拍照"或"开始等距间隔拍照"或"拍照"时弹出警告
  // const hasIntervalPictureAction = selectList.value.some(action => [9, 10].includes(action.actionType));
  // if (hasIntervalPictureAction && [4, 9, 10].includes(item.actionType)) {
  //   ElMessage({
  //     plain: true,
  //     message: '航点的"开始等时间隔拍照"/"开始等距间隔拍照"/"拍照"航点动作间缺少"结束间隔拍照"动作',
  //     type: "warning",
  //   });
  //   return;
  // }

  // 最新需求，添加时不要验证
  // if (isDis(item)) {
  //   ElMessage({
  //     plain: true,
  //     message: isDis(item),
  //     type: "warning",
  //   });
  //   return;
  // }

  // 更新录像状态
  isVideo.value =
    item.actionType === 6
      ? false
      : item.actionType === 8
        ? true
        : isVideo.value;


  // 更新拍照状态
  isPicture.value = [9, 10].includes(item.actionType)
    ? false
    : item.actionType === 11
      ? true
      : isPicture.value;

  // 添加动作到列表（允许重复添加）
  selectList.value.push(item);
  emit("wayView", selectList.value);
};
// watch(
//   () => props.formPoint.actions,
//   (newVal) => {
//     console.log(newVal)
//     if (newVal.length > 0) {
//       selectList.value = newVal;
//     }
//   },
//   {
//     deep: true,
//   }
// );
const setselectList = (list) => {
  selectList.value = list;
}
defineExpose({
  setselectList
})
// watch(
//   () => props.formPoint.wayPointName,
//   (newVal) => {
//     console.log(props.formPoint)
//   },
//   {
//     deep: true,
//   }
// );
onMounted(() => {
  if (props.formPoint?.action && props.formPoint?.action.length > 0) {
    selectList.value = props.formPoint.action;
  }
});
</script>
<style scope lang="scss">
.viewStyle {
  position: absolute;
  right: 18%;
  bottom: 10vh;
  z-index: 1;
  width: 300px;
  height: 60vh;
  color: #303133;
  background-color: #fff;
  border-radius: 4px;

  .flex-row-center {
    height: 32px;
    padding: 5px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 32px;
    background: #f0f2f5;
    border: 1px solid #dcdfe6;
    border-radius: 4px;

    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
  }

  .footer {
    padding: 10px;
    margin-bottom: 0;
    text-align: right;
    border-bottom: 1px solid #dcdfe6;

    .el-button {
      font-size: 12px;
      font-weight: 400;
      color: #606266;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }

    .el-button--primary {
      color: #fff;
      background: #1989fa;
      border-color: #dcdfe6;
    }
  }
}

.flex-row-center:hover {
  cursor: pointer;
}

.border-active {
  background: #e6f1fc !important;
  border: 1px solid #a3d0fd !important;
}

.disable {
  // background: #F56C6C !important;
  border: 1px solid #F56C6C !important;
  cursor: not-allowed !important;
}

.airline-setting {
  position: relative;
  display: flex;
  justify-content: space-between;

  :deep(.address .el-input__wrapper) {
    height: 32px;
    line-height: 32px;
  }

  .du {
    position: absolute;
    top: 0;
    right: -8px;
  }
}

.airline-slider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;

  img {
    width: 16px;
    height: 16px;
    margin: 0 5px;
  }

  .el-slider__bar {
    background: linear-gradient(79deg, #00ccd0 0%, #3a6af0 100%);
    box-shadow: 0 0 8px 0 rgb(97 137 202 / 43%);
  }

  .el-slider__button {
    width: 11px;
    height: 11px;
    border: none;
  }
}

.icondelect {
  width: 16px;
  font-size: 16px;
  color: #303133;
}

.divider {
  margin: 10px 0;
}
</style>
